"use strict";
import * as React from 'react';
import { commonProps, commonStyles } from "../../assets/styles/common";
import { focusStyles } from "../../assets/styles/archive";
const { connect } = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const { Actions } = require("react-native-router-flux");
import MyText from "../../component/MyText";
import MyIcon from "../../component/icon";
import Request from "../../utils/Request";
import Colors from "../../assets/styles/Colors";
const { View, FlatList, Image, TouchableOpacity } = require('react-native');
const { List, WhiteSpace } = require('antd-mobile');
class FocusPage extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            focusList: [],
        };
        this.onFocus = (user) => {
            let focusList = this.state.focusList;
            const index = focusList.indexOf(user.id);
            if (index === -1) {
                focusList.push(user.id);
            }
            else {
                focusList.splice(index, 1);
            }
            this.props.dispatch({
                type: 'user/follow',
                payload: {
                    follower: this.props.auth.userInfo.id,
                    concerned: user.id
                }
            });
        };
        this.renderListItem = (p) => {
            const index = p.index;
            const item = p.item;
            return (<View style={focusStyles.listItem}>
                <Image source={{ uri: Request.checkImageUrl(item.avatar) }}/>
                <View style={commonStyles.flex1}>
                    <MyText style={focusStyles.listItemNameText}>{item.nickName}</MyText>
                    <MyText style={focusStyles.listItemAddressText}>{`${item.duty ? item.duty + '在' : ''}${item.company.name}`}</MyText>
                </View>
                <TouchableOpacity style={this.state.focusList.indexOf(item.id) !== -1 ? focusStyles.listItemFocusStatus : focusStyles.listItemUnFocusStatus} onPress={this.onFocus.bind(this, item)}>
                    <MyIcon name={this.state.focusList.indexOf(item.id) !== -1 ? 'icon-guanzhuzuozheyiguanzhu' : 'icon-guanzhuzuozhe'} size={20} color={this.state.focusList.indexOf(item.id) !== -1 ? Colors.Active : '#ccc'}/>
                </TouchableOpacity>
            </View>);
        };
    }
    componentDidMount() {
        this.props.dispatch({
            type: 'user/fetchHotMembers',
            payload: {}
        });
    }
    render() {
        return (<View style={[commonStyles.container, focusStyles.container]}>
                <NavigationBar {...commonProps.navBar} rightButton={{
            title: '下一步', tintColor: '#D8BB26', handler: () => {
                Actions.replace('tab');
            }
        }} title={{ title: '推荐关注', tintColor: '#fff' }}/>
                <FlatList style={commonStyles.flex1} data={this.props.user.hotMembers} keyExtractor={(item, index) => index} extraData={this.state} ItemSeparatorComponent={() => <WhiteSpace size='xs'/>} renderItem={this.renderListItem}/>
                
                
                
            </View>);
    }
}
export default connect(({ auth, user }) => ({ auth, user }))(FocusPage);
